<style scoped lang="scss">
.chat-con{
  display: flex;
  flex-direction: column;

  & > view{
    &:nth-child(1){
      flex: 1;
      overflow: hidden;
    }
    &:nth-child(2){
      margin: 32rpx 40rpx;
      display: flex;
      border-radius: 40rpx;
      background: #FFFFFF;
      border: 1rpx solid #567AED;
      padding-left: 30rpx;
      padding-right: 30rpx;

      & > view{
        &:nth-child(1){
          flex: 1;
          textarea{
            padding-top: 20rpx;
            padding-bottom: 20rpx;
            width: 100%;
          }
        }
        &:nth-child(2){
          display: flex;
          align-items: center;
          justify-content: center;
          padding-left: 10rpx;
          text{
            color: #AABCF6;
            font-size: 38rpx;
          }
        }
      }
    }
  }
}

</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head bg="transparent">
        绘画
      </h-head>
    </view>

    <view class="s-body chat-con">
      <view>
        <scroll-view class="maxh" :scroll-y="true" :scroll-top="scrollY">
          <chat-list :list="list" type="draw" @action="mjAction" @refsh="refshAction"></chat-list>
        </scroll-view>
      </view>


      <view>
        <view>
          <textarea auto-height @input="changeInput" @keyup.enter="send" v-model="text" placeholder="请输入关键词" maxlength="9000"></textarea>
        </view>
        <view @click="send">
          <text class="iconfont icon-fasong"></text>
        </view>
      </view>
    </view>

    <view class="s-footer">
      <h-footer active="4"></h-footer>
    </view>
  </view>
</template>

<script>
import ChatList from "../../components/chat/ChatList";
let timer;
export default {
  components: {
    ChatList
  },
  onShow() {
    this.initList()
  },
  onLoad(option) {

  },
  onHide() {
    timer && clearInterval(timer)
  },
  onUnload() {
    timer && clearInterval(timer)
  },
  data() {
    return {
      scrollY: 99999,
      list: [],
      text: '',
      userInfo: {},
      checkIds: [],
      param: {
        action: '',
        imageId: '',
      },
    };
  },
  methods: {
    refshAction(d) {
      this.text = d.messageText
      this.param.action = ''
      this.param.imageId = ''
      this.send()
    },
    mjAction(id, action, text) {
      this.param.action = action
      this.text = text
      this.param.imageId = id
      this.send()
    },
    initList() {
      this.httpClient.post({
        url: this.APIPath.chat.drawList,
        noLoading: true,
        noCheck: true,
        data: {}
      }).then(res => {
        if(res.code !== 200) {
          return;
        }
        this.list = res.data || []

        const arr = []
        this.list.forEach(v => {
          if(v.status === 0) {
            arr.push(v.id)
          }else {
            v.cbJson = !!v.cbJson ? JSON.parse(v.cbJson) : {}
          }
        })
        this.checkIds = arr
        this.checkDrawStatus()
        this.lastScroll()
      }, err => {
      })
    },
    changeInput() {
      if(this.text.indexOf('\n') > -1) {
        this.text = this.text.replaceAll('\n', '')
      }
    },
    checkDrawStatus() {
      timer && clearInterval(timer)

      if(this.checkIds.length === 0) {
        return;
      }

      timer = setInterval(v => {
        this.httpClient.post({
          url: this.APIPath.chat.checkDraw,
          noLoading: true,
          data: {
            ids: this.checkIds,
          }
        }).then(res => {
          if(res.data) {
            let l = false
            for(let i of res.data){
              if(i.status === 1) {
                l = true
                break;
              }
            }
            if(l) {
              this.initList()
            }
          }
        }, err => {
        })
      }, 4000)
    },

    send() {
      const text = this.text
      if(!text) {
        return this.utils.toast('请输入关键词');
      }

      this.httpClient.post({
        url: this.APIPath.chat.draw,
        data: {
          message: this.text,
          action: this.param.action,
          imageId: this.param.imageId,
        }
      }).then(res => {
        this.text = ''
        this.param.action = ''
        this.param.imageId = ''
        this.initList()
      }, err => {
      })
    },
    lastScroll(num = 999) {
      this.$nextTick(res => {
        this.scrollY += num
        setTimeout(v => {
          this.scrollY += num
        }, 200)
      })
    },


  },
};
</script>

